<template>
  <div class="weui_cell" style="padding:10px;border-radius:5px;">
    <div class="weui_cell_bd weui_cell_primary">
      <textarea class="weui_textarea" placeholder="{{$t(placeholder)}}" :name="name" :rows="rows" :cols="cols" v-model="value" :style="textareaStyle" :maxlength="max"></textarea>
      <div class="weui_textarea_counter" v-show="showCounter && max"><span>{{max-count}}</span></div>
    </div>
  </div>
</template>

<script>
import Base from '../../libs/base'

export default {
  minxins: [Base],
  props: {
    showCounter: {
      type: Boolean,
      default: true
    },
    max: Number,
    value: {
      type: String,
      default: '',
      twoWay: true
    },
    name: String,
    placeholder: {
      type: String,
      default: ''
    },
    rows: {
      type: Number,
      default: 3
    },
    cols: {
      type: Number,
      default: 30
    },
    height: Number
  },
  watch: {
    value (newVal) {
      if (this.max && this.value.length > this.max) {
        this.value = newVal.slice(0, this.max)
      }
      this.$emit('on-change', this.value)
    }
  },
  computed: {
    count () {
      return this.value.length
    },
    textareaStyle () {
      if (this.height) {
        return {
          height: `${this.height}px`
        }
      }
    }
  }
}
</script>

<style lang="less">
@import '../../styles/weui/widget/weui_cell/weui_cell_global';
@import '../../styles/weui/widget/weui_cell/weui_form/weui_form_common';
</style>
